<script setup lang="ts">
import { ref } from 'vue';
import { getCurrentInstance } from '@tarojs/taro';
import DeviceAccountDetail from './components/device-account-detail.vue';
import DeviceAccountStatus from './components/device-account-status.vue';
import DeviceAccountInspection from './components/device-account-inspection.vue';
import DeviceAccountMaintenance from './components/device-account-maintenance.vue';

const tabValue = ref('detail');
/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  id: string;
  deviceId?: string;
};
const tabs = {
  detail: DeviceAccountDetail,
  status: DeviceAccountStatus,
  inspection: DeviceAccountInspection,
  maintenance: DeviceAccountMaintenance,
};
</script>
<template>
  <view class="device-detail app-page--1">
    <app-navbar title="资产详情" />
    <nut-tabs v-model="tabValue">
      <nut-tab-pane title="资产详情" pane-key="detail" />
      <nut-tab-pane v-if="params.deviceId" title="运行状态" pane-key="status" />
      <nut-tab-pane title="巡检记录" pane-key="inspection" />
      <nut-tab-pane title="保养记录" pane-key="maintenance" />
    </nut-tabs>
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <component :is="tabs[tabValue]" :key="'device-account-detail-' + tabValue"> </component>
    </scroll-view>
  </view>
</template>
<style lang="scss">
.device-detail {
  &__wrapper {
    margin: 20px 20px 80px;
    background-color: #fff;
    border-radius: 16px;
  }
  //去掉tabs多余留白
  .nut-tabs {
    &__content {
      display: none;
    }
  }
}
</style>
